import React, { useState } from 'react';
import { Button, Card, Table, Tag } from 'antd';
import { vipLabelMap, vipColorMap } from '@/enums/vip.enum';

import type { TableColumnsType } from 'antd';
import type { DataType, OrderInfoType, BuyerInfoType } from '../types/index.type';
import type { VipValueType } from '@/types/vip.type';

const columns: TableColumnsType<DataType> = [
  {
    title: '订单信息',
    dataIndex: 'orderInfo',
    render: (orderInfo: OrderInfoType) => {
      return (
        <div className="flex items-center">
          <img src={orderInfo.orderImg} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{orderInfo.goodsName}</div>
            <div>{orderInfo.goodsType}</div>
            <div>{orderInfo.orderDate}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: '单价 x 数量',
    render: (_, data) => {
      const { unitPrice, quantity } = data;
      return `¥${unitPrice} x ${quantity}`;
    },
  },
  { title: '实收金额', dataIndex: 'totalPrice' },
  {
    title: '买家信息',
    dataIndex: 'buyerInfo',
    render: (buyerInfo: BuyerInfoType) => {
      return (
        <div className="flex items-center">
          <img src={buyerInfo.avatar} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{buyerInfo.name}</div>
            <div>{buyerInfo.phoneNumber}</div>
            <div style={{ color: vipColorMap[buyerInfo.vipType] }}>{vipLabelMap[buyerInfo.vipType]}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: '订单状态',
    render: (_, { state }) => {
      const stateMap = {
        '-1': { label: '已退单', color: 'volcano' },
        0: { label: '待支付', color: 'green' },
        1: { label: '已支付', color: 'geekblue' },
      };
      return <Tag color={stateMap[state].color}>{stateMap[state].label}</Tag>;
    },
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <>
        <Button type="link" className="p-0">
          订单详情
        </Button>
        <Button type="link" className="p-0 ml-8">
          备注
        </Button>
      </>
    ),
  },
];

const data: DataType[] = [];
for (let i = 0; i < 56; i++) {
  data.push({
    key: i,
    orderInfo: {
      orderImg: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
      goodsName: '夏季男士超帅超豪华LV半截短袖',
      goodsType: `YFSP-${+new Date()}${Math.floor(Math.random() * 100)}`,
      orderDate: '2024-05-13',
    },
    unitPrice: '12888.00',
    quantity: '2',
    totalPrice: '25776.00',
    buyerInfo: {
      name: '胖虎',
      avatar: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
      phoneNumber: '17506668888',
      vipType: Math.floor(Math.random() * 7) as VipValueType,
    },
    state: 1,
  });
}

const TableCard = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Card className="mt-16">
      <div>
        <Button type="primary" className="bg-primary-color">
          批量解绑
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={{
          pageSize: 5,
          showQuickJumper: true,
          onShowSizeChange: (current, size) => {
            console.log('🚀 ~ TableCard ~ current, size:', current, size);
          },
        }}
        className="mt-8"
      />
    </Card>
  );
};

export default TableCard;
